import React from 'react';
import { StatusBar } from 'react-native';
import {
  createAppContainer,
  createStackNavigator,
  createBottomTabNavigator,
} from 'react-navigation';
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
import { TabBarIcon } from '~/components';
import { DefaultStyles } from '~/styles/GlobalStyles';
import { dismissSibling } from '~/utils/ScreenAdapter';
import { LIGHT_ROUTES } from '../config';

//引入各页面
import Home from '../pages/home';
import NativePage from '../pages/native';
import Login from '../pages/login';
import IsIntro from '../pages/welcome';
import Attendance from '../pages/attendance';
const BottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: '首页',
        tabBarIcon: ({ focused }) => (
          <TabBarIcon focused={focused} type={'home'} />
        ),
      },
    },
    Order: {
      screen: Attendance,
      navigationOptions: {
        tabBarLabel: '记录',
        tabBarIcon: ({ focused }) => (
          <TabBarIcon focused={focused} type={'order'} />
        ),
      },
    },
    Customer: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: '热门',
        tabBarIcon: ({ focused }) => (
          <TabBarIcon focused={focused} type={'customer'} />
        ),
      },
    },
    User: {
      screen: NativePage,
      navigationOptions: {
        tabBarLabel: '我的',
        tabBarIcon: ({ focused }) => (
          <TabBarIcon focused={focused} type={'user'} />
        ),
      },
    },
  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      activeTintColor: DefaultStyles.ThemeColor,
      activeBackgroundColor: DefaultStyles.White,
      inactiveTintColor: DefaultStyles.Black32,
      inactiveBackgroundColor: DefaultStyles.White,
      style: {
        backgroundColor: DefaultStyles.White,
      },
      labelStyle: {
        paddingBottom: 5,
        fontSize: 10,
        ...DefaultStyles.Regular,
      },
    },
  }
);

const StackNavigator = createStackNavigator(
  {
    HomePage: {
      screen: BottomTabNavigator, //Tab作为Stack路由
    },
    IsIntro: {
      screen: IsIntro,
    },
    Login: {
      screen: Login,
    },
  },
  {
    initialRouteName: 'IsIntro',
    defaultNavigationOptions: {
      headerTintColor: DefaultStyles.Black84,
      headerStyle: {
        backgroundColor: '#fff',
      },
    },
    navigationOptions: {
      tabBarLabel: 'Home!',
    },
    headerMode: 'none',
    mode: 'card',
    onTransitionStart: (to, from) => {
      // 页面关闭的时候 键盘同时隐藏
      dismissKeyboard();
      const { routeName } = to.scene.route;
      //判断当前页面Header的底色,如果底色是蓝色或其他深色
      //将StatusBar的文字颜色设为白色,如果底色是白色,则文字审核为黑色
      if (LIGHT_ROUTES.includes(routeName)) {
        StatusBar.setBarStyle('light-content');
      } else {
        StatusBar.setBarStyle('dark-content');
      }
    },
    onTransitionEnd: (to, from) => {
      //页面返回或切换时,隐藏所有Sibling
      if (from.index > to.index) {
        dismissSibling();
      }
    },
  }
);

export default createAppContainer(StackNavigator);
